<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href='css/bootstrap.min.css' rel='stylesheet' />
    <style>

        /* 语言选择 */
        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }
        /* 日历 */
        #calendar {
            margin: 40px auto;
            padding: 0 10px;
        }
        /* Event 参数 className 的值 */
        .done:before {
            content:"【 已完成 】";
            background-color:yellow;
            color:green;
            text-align:center;
            font-weight:bold;
            width:100%;
        }
        /* Event 参数 className 的值 */
        .doing:before {
            content:"【 未完成 】";
            background-color:yellow;
            color:red;
            text-align:center;
            font-weight:bold;
        }

    </style>
</head>
<body>
    <div id='top'>
        Language:
        <select id='lang-selector'></select>
    </div>

    <div id='calendar'></div>

</body>
<script src='js/jquery.min.js'></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/locale-all.js'></script>
<script src='js/bootstrap.min.js'></script>
<script type="text/javascript">
    $(document).ready(function() {
        //国际化默认值为'en'，代表使用英文
        var initialLangCode = 'en';
        //初始化FullCalendar 
        $('#calendar').fullCalendar({
            //设置头部信息，如果不想显示，可以设置header为false
            header: {
                //日历头部左边：初始化切换按钮
                left: 'prev,next today',
                //日历头部中间：显示当前日期信息
                center: 'title',
                //日历头部右边：初始化视图
                right: 'month,agendaWeek,agendaDay'
            },
            //设置是否显示周六和周日，设为false则不显示  
            weekends: true,
            //日历初始化时显示的日期，月视图显示该月，周视图显示该周，日视图显示该天，和当前日期没有关系
            defaultDate: '2016-06-06',
            //日程数据 
            events: [
            {
                id: 1,
                title: '这是一个all-day数据',
                allDay: true,
                start: '2016-08-11'
            },
            {
                id: 2,
                title: '开始时间为12PM',
                start: '2016-08-11 12:00'
            },
            {
                id: 3,
                title: '给一点颜色',
                start: '2016-08-11',
                color: 'red'
            },
            {
                id: 4,
                title: '使用className:done',
                start: '2016-08-10 09:00',
                end: '2016-08-11 18:00',
                color: 'blue',
                className: 'done'
            },
            {
                id: 5,
                title: '使用className:doing',
                start: '2016-08-11 09:00',
                end: '2016-08-12 18:00',
                color: 'green',
                className: 'doing'
            },
            {
                id: 6,
                title: '使用URL和字体颜色',
                start: '2016-08-11',
                color: 'pink',
                url: 'http://flovel.xyz',
                className: 'doing',
                textColor: 'black'
            },
            {
                id: 7,
                title: '使用backgroundColor和borderColor',
                start: '2016-08-11 09:00',
                end: '2016-08-12 18:00',
                backgroundColor: 'gray',
                borderColor: 'red',
                className: 'done'
            },

        ]
        });

        //初始化语言选择的下拉菜单值
        $.each($.fullCalendar.locales, function(langCode) {
            $('#lang-selector').append(
                    $('<option/>')
                            .attr('value', langCode)
                            .prop('selected', langCode == initialLangCode)
                            .text(langCode)
            );
        });

        //当选择一种语言时触发
        $('#lang-selector').on('change', function() {
            if (this.value) {
                $('#calendar').fullCalendar('option', 'locale', this.value);
            }
        });
    });
</script>

</html>